<template>
  <div class="addApartment">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的公寓</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/apartmentList' }">公寓列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加公寓</el-breadcrumb-item>
    </el-breadcrumb>
    <!--<div>公寓名、城市名、别墅描述、别墅图组、别墅价格、设备、服务 地址 </div>-->
    <el-row>
      <el-col :span="12" :offset="2">
        <el-form class="addApartment-container" :rules="rules" ref="form" :model="apartment" label-position="left">
          <el-form-item label="城市名" prop="cityName">
            <el-row>
              <el-col>
                <el-select v-model="apartment.cityId" placeholder="请选择" class="selector" @change="changeCity">
                  <el-option
                    v-for="(item) in cities"
                    :key="item.cityId"
                    :label="item.cityName"
                    :value="item.cityId">
                    <span style="float: left">{{ item.cityName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.cityName_en }}</span>
                  </el-option>
                </el-select>
                <!--<el-input placeholder="请输入城市名" v-model="apartment.cityName"></el-input>-->
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="公寓名" prop="apartmentName">
            <el-input placeholder="请输入公寓名" v-model="apartment.apartmentName"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input placeholder="请输入地址" v-model="apartment.address"></el-input>
          </el-form-item>
          <el-form-item label="公寓价格" prop="price">
            <el-input type="Number" placeholder="请输入公寓价格，元/日" v-model="apartment.price"></el-input>
          </el-form-item>
          <el-form-item label="设备" prop="device">
            <el-row>
              <el-col>
                <el-checkbox-group v-model="apartment.device">
                  <el-checkbox v-for="(item, index) in deviceList" :label="item.id" :key="item.id" @change="changeDevice(index)" border>{{item.deviceName}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="服务" prop="service">
            <el-row>
              <el-col>
                <el-checkbox-group v-model="apartment.service">
                  <el-checkbox class="serviceCheckbox" v-for="(item, index) in serviceList" :key="item.id" :label="item.id" @change="changeService(index)" border>{{item.servicename}}</el-checkbox>
                </el-checkbox-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" :autosize="{ minRows: 5}" placeholder="请输入公寓的描述" v-model="apartment.description"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-row>
              <el-col>
                <el-upload
                  action="/api/upload/up.do"
                  ref="upload"
                  list-type="picture-card"
                  :on-success="uploadPicSuccess"
                  :auto-upload="false">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-button v-show="isNotUploaded" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="btn-container">
            <el-button class="btn_submit" @click="submit('form')">提交</el-button>
            <el-button class="btn_submit">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  import ElRow from 'element-ui/packages/row/src/row';
  import ElCol from 'element-ui/packages/col/src/col';
  export default {
    components: {
      ElCol,
      ElRow},
    data() {
      return {
        deviceList: [],
        serviceList: [],
        imgArr: [],
        dialogImageUrl: '',
        dialogVisible: false,
        isNotUploaded: true,
        apartment: {
          apartmentName: '',
          cityName: '',
          cityId: '',
          price: '',
          device: [],
          service: [],
          description: '',
          address: ''
        },
        rules: {
          apartmentName: [{
            required: true,
            message: '请输入公寓名',
            trigger: 'blur'
          }],
          cityName: [{
            required: true,
            message: '请输入城市名',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
          price: [{
            required: true,
            message: '请输入公寓价格',
            trigger: 'blur'
          }],
          device: [{
            required: true,
            message: '请选择公寓的设备',
            trigger: 'blur'
          }],
          service: [{
            required: true,
            message: '请选择公寓的服务',
            trigger: 'blur'
          }],
          description: [
            {
              required: true,
              message: '请添加公寓描述',
              trigger: 'blur'
            }
          ],
          picture: [
            {
              required: true
            }
          ]
        },
        cities: [
          {
            cityId: 1,
            cityName: '上海',
            cityName_en: 'Shanghai'
          },
          {
            cityId: 2,
            cityName: '北京',
            cityName_en: 'Beijing'
          },
          {
            cityId: 3,
            cityName: '伦敦',
            cityName_en: 'London'
          },
          {
            cityId: 4,
            cityName: '巴黎',
            cityName_en: 'Paris'
          },
          {
            cityId: 5,
            cityName: '悉尼',
            cityName_en: 'Sydney'
          },
          {
            cityId: 6,
            cityName: '日本',
            cityName_en: 'Japan'
          }

        ]
      };
    },
    created() {
      this.getDeviceList();
      this.getServiceList();
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      uploadPicSuccess(response) {
        this.isNotUploaded = false;
        var img = `/api/image/${response.data}`;
        this.imgArr.push(img);
      },
      changeCity(value) {
        let index = value - 1;
        let cityName = this.cities[index].cityName;
        this.apartment.cityName = cityName;
      },
      changeService(index) {
        let service = this.serviceList[index];
        service.isProvide = true;
      },
      changeDevice(index) {
        let device = this.deviceList[index];
        device.isProvide = false;
      },
      getDeviceList() {
        this.$http.post('/api/device/getDeviceList.do')
          .then((response) => {
            let data = response.data;
            if (data.status === 0) {
              let deviceList = data.data.list;
              if (deviceList) {
                deviceList.forEach((device) => {
                  device.isProvide = false;
                });
                this.deviceList = deviceList;
              } else {
                this.$message.error(data.msg);
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.data.msg);
          });
      },
      getServiceList() {
        this.$http.post('/api/service/getServiceList.do')
          .then((response) => {
            let data = response.data;
            if (data.status === 0) {
              let serviceList = data.data.list;
              serviceList.forEach((service) => {
                service.isProvide = false;
              });
              this.serviceList = serviceList;
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((error) => {
            this.$message.error(error.data.msg);
          });
      },
      submit(formname) {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            var deviceStr = this.apartment.device.join();
            var serviceStr = this.apartment.service.join();

            this.$http.post('/api/apartment/addApartment.do', this.$qs.stringify({
              'apartmentName': this.apartment.apartmentName,
              'cityName': this.apartment.cityName,
              'cityId': this.apartment.cityId,
              'price': this.apartment.price,
              'address': this.apartment.address,
              'description': this.apartment.description,
              'deviceIdList': deviceStr,
              'serviceIdList': serviceStr,
              'pictures': this.imgArr.join()
            }))
              .then((response) => {
                let data = response.data;
                if (data.status === 0) {
                  this.$message({
                    message: data.msg,
                    tpye: 'success',
                    duration: 1000
                  });
                }
              })
              .catch(() => {
                this.$message.error('网络错误');
              });
          }
        });
      }
    }
  };
</script>

<style scoped>
  .addApartment{
    line-height: 0;
    text-align: left;
  }
  .addApartment-container {
    margin-top: 40px;
  }
  .serviceCheckbox{
    line-height: 20px;
  }
  .el-checkbox{
    margin-left: 0;
    margin-right: 5px;
  }
  .el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
  }
  .btn-container{
    text-align: center;
  }
</style>
